<template>
  <div class="navs" :class="class1">
    <div class="lis" v-for="(it,index) in uls" :key="index" @click="navToItem(it)">
        <img :src="it.img" alt="">
        <p>{{it.desc}}</p>
    </div>
  </div>
  <van-popup v-model:show="showModel" teleport="body" round >
      <div class="more_fun">
          <div class="fun_item" v-for="it in funitems" :key="it">
              <p class="icon"><img :src="it.icon" alt=""></p>
              <p class="tle">{{it.txt}}</p>
          </div>
      </div>
  </van-popup>
</template>

<script lang="ts">
import { defineComponent, reactive, ref } from "@vue/runtime-core";
import { Toast } from "vant";
import { useRouter } from "vue-router";
import { Popup } from 'vant';
interface NavItem{
    img:string,
    desc:string,
    link:string
}
export default defineComponent({
    name:'NavList',
    props:{
        class1:String
    },
    components:{
        [Popup.name]:Popup
    },
    setup(){
        const router=useRouter();
        let uls:Array<NavItem>=reactive([
            {
                img:require('../assets/imgs/icon_hl.png'),
                desc:'课件预览',
                link:'/courseview'
            },
            {
                img:require('../assets/imgs/icon_hl.png'),
                desc:'最新活动',
                link:''
            },
            {
                img:require('../assets/imgs/icon_hl.png'),
                desc:'米兰画廊',
                link:''
            },
            {
                img:require('../assets/imgs/icon_hl.png'),
                desc:'视频课程',
                link:''
            },
            {
                img:require('../assets/imgs/icon_hl.png'),
                desc:'名师墙',
                link:''
            },
            {
                img:require('../assets/imgs/icon_hl.png'),
                desc:'宝贝专栏',
                link:''
            },
            {
                img:require('../assets/imgs/icon_gywm.png'),
                desc:'关于我们',
                link:''
            },
            {
                img:require('../assets/imgs/icon_more.png'),
                desc:'更多',
                link:''
            },
        ])
        let isshow=ref(false);
        let navToItem=(item:NavItem)=>{
            if(item.link){
                router.push(item.link)
            }else{
                if(item.desc==="更多"){
                    isshow.value=true;
                }else{
                    Toast('功能正在开发中...');
                }
            }
        }
        
        let funitems=reactive([
            {
                icon:'',
                txt:'招聘'
            },
            {
                icon:'',
                txt:'留言'
            }
        ])
        return{
           uls,
           navToItem,
           showModel:isshow,
           funitems
        }
    }

})
</script>

<style lang="scss" scoped>
    .navs{
        width:100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        padding:20px 10px;
        border-bottom: 10px solid #f1f1f1;
        .lis{
            width:25%;
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            padding:20px 0;
            img{
                display: block;
                border-radius: 50%;
                border:none;
                width:90px;
                height: 90px;
                margin-bottom: 10px;
            }
            p{
                text-align: center;
                font-size: 14PX;
                color: #333;
                font-weight: 400;
            }
        }
    }
    .popup{
        background: 200,200,200,0.6;
    }
    .more_fun{
        width:500px;
        height: 550px;
        padding: 40px 20px;
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        flex:1 0 auto;
        .fun_item{
            width:30%;
            height: 150px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            .icon{
                width: 100px;
                height: 100px;
                img{
                    width:100%;
                    height: 100%;
                }
            }
            .tle{
                font-size: 14PX;
                color: #333;
                font-weight: 600;
            }
        }
        
    }
</style>>
